<template>
  <div id="welcome">
    <!--统计-->

    <div slot="header" class="clearfix" style="margin: 0 50px">
      <h1>仪表盘</h1>
      <el-row :gutter="20">
        <el-col :span="6"><div class="grid-content bg-purple" style="text-align: center;padding-top: 5px">
          <h2>12</h2>
          <h5>在线人数</h5>
        </div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple" style="text-align: center;padding-top: 5px">
          <h2>12</h2>
          <h5>在线人数</h5></div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple" style="text-align: center;padding-top: 5px">
          <h2>12</h2>
          <h5>在线人数</h5></div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple" style="text-align: center;padding-top: 5px">
          <h2>12</h2>
          <h5>在线人数</h5></div></el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6"><div class="grid-content bg-purple" style="text-align: center;padding-top: 5px">
          <h2>12</h2>
          <h5>在线人数</h5></div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple" style="text-align: center;padding-top: 5px">
          <h2>12</h2>
          <h5>在线人数</h5></div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple" style="text-align: center;padding-top: 5px">
          <h2>12</h2>
          <h5>在线人数</h5></div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple" style="text-align: center;padding-top: 5px">
          <h2>12</h2>
          <h5>在线人数</h5></div></el-col>
      </el-row>

    </div>





<!--    <el-row :gutter="20">
      <el-col :span="6" :xs="24" :sm="12" :md="6">
        <div class="info-item">
          <div>
            <i class="el-icon-chat-dot-square"></i>
          </div>
          <div>
            <h2>消息统计:</h2>
            <p>1157</p>
          </div>
        </div>
      </el-col>
      <el-col :span="6" :xs="24" :sm="12" :md="6">
        <div class="info-item">
          <div>
            <i class="el-icon-s-custom"></i>
          </div>
          <div>
            <h2>用户统计:</h2>
            <p>1157</p>
          </div>
        </div>
      </el-col>
      <el-col :span="6" :xs="24" :sm="12" :md="6">
        <div class="info-item">
          <div>
            <i class="el-icon-picture"></i>
          </div>
          <div>
            <h2>图片统计:</h2>
            <p>1157</p>
          </div>
        </div>
      </el-col>
      <el-col :span="6" :xs="24" :sm="12" :md="6">
        <div class="info-item">
          <div>
            <i class="el-icon-bell"></i>
          </div>
          <div>
            <h2>通知统计:</h2>
            <p>1157</p>
          </div>
        </div>
      </el-col>
    </el-row>-->

    <br>
    <!--图表-->
<!--    <el-row :gutter="20">
      <el-col :span="8" :xs="24" :sm="24" :md="8">
        <el-card>
          <div ref="chartLeft" class="chart-panel"></div>
        </el-card>
      </el-col>
      <el-col :span="8" :xs="24" :sm="24" :md="8">
        <el-card>
          <div ref="chartCenter" class="chart-panel"></div>
        </el-card>
      </el-col>
      <el-col :span="8" :xs="24" :sm="24" :md="8">
        <el-card>
          <div ref="chartRight" class="chart-panel"></div>
        </el-card>
      </el-col>
    </el-row>-->
    <!--百度搜索-->
<!--    <el-card class="box-card" style="margin-top: 15px;">
      <div slot="header" class="clearfix">
        <span>百度搜索</span>
      </div>
      &lt;!&ndash;百度搜索&ndash;&gt;
      <BaiduSearch/>
    </el-card>-->
    <!--快捷功能菜单-->
<!--    <el-card class="box-card" style="margin-top: 15px;">
      <div slot="header" class="clearfix">
        <span>快捷功能菜单</span>
      </div>
      <IMenu/>
    </el-card>-->
  </div>
</template>

<script>
import IMenu from "@/components/menu/IMenu";
import BaiduSearch from "@/components/search/BaiduSearch";
export default {
  name: "Index",
  data() {
    return {
    }
  },
  components: {IMenu,BaiduSearch},
  mounted() {
    this.init();
  },
  methods: {
    chartLeft() {
      const myChart = echarts.init(this.$refs.chartLeft);
      const option = {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
        },
        yAxis: {},
        series: [{
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      return this;
    },
    chartCenter() {
      const myChart = echarts.init(this.$refs.chartCenter);
      const option = {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {
          formatter: '{a} <br/>{b} : {c}%'
        },
        series: [{
          name: 'Pressure',
          type: 'gauge',
          detail: {
            formatter: '{value}'
          },
          data: [{
            value: Math.floor(Math.random() * 100),
            name: ''
          }]
        }]
      };
      myChart.setOption(option);
      return this;
    },
    chartRight() {
      const myChart = echarts.init(this.$refs.chartRight);
      const option = {
        title: {
          text: 'ECharts 入门示例'
        },
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'line',
          smooth: true
        }]
      };
      myChart.setOption(option);
      return this;
    },
    init() {
      this.chartLeft().chartCenter().chartRight();
    },
  }
}
</script>

<style>
span{
  text-align: center;
  margin-top: 20px;
}
h2{
  color: #ffffff;
}
h5{
  color: #ffffff;
  font-family: “微软雅黑”;
}
.el-row {
  margin-bottom: 20px;
&:last-child {
   margin-bottom: 0;
 }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #11142d;
}
.bg-purple {
  background: #11142d;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 10px;
  min-height: 120px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>